<div class="kuiSideBarSection">
  <div class="form-group">
    <div class="form-group">
      <label>Text Scale</label>
      <select class="form-control" ng-model="vis.params.scale" ng-options="mode for mode in config.collections.scales"></select>
    </div>
    <div class="form-group">
      <label>Orientations</label>
      <select class="form-control" ng-model="vis.params.orientation" ng-options="mode for mode in config.collections.orientations"></select>
    </div>
    <div class="form-group">
      <label>Font Size</label>
      <div class="tag-cloud-fontsize-slider"></div>
      <div class="kuiBar">
        <div class="kuiBarSection">
          <input
            type="number"
            min="1"
            max="{{vis.params.maxFontSize}}"
            class="kuiTextInput tag-cloud-fontsize-slider__input"
            ng-model="vis.params.minFontSize"
            aria-label="Minimum tag font size"
            aria-describedby="tagCloudFontSliderMinUnit"
          >
          <span id="tagCloudFontSliderMinUnit" aria-label="pixels">px</span>
        </div>
        <div class="kuiBarSection">
          <input
            type="number"
            min="{{vis.params.minFontSize}}"
            max="100"
            class="kuiTextInput tag-cloud-fontsize-slider__input"
            ng-model="vis.params.maxFontSize"
            aria-label="Maximum tag font size"
            aria-describedby="tagCloudFontSliderMaxUnit"
          >
          <span id="tagCloudFontSliderMaxUnit" aria-label="pixels">px</span>
        </div>
      </div>
    </div>
    <div>
      <label>
        <input type="checkbox" value="{{hideLabel}}" ng-model="vis.params.showLabel" name="showLabel"
               ng-checked="vis.params.showLabel">
        Show Label
      </label>
    </div>
  </div>
</div>
